import React from 'react';
import { observer, inject } from 'mobx-react';
import { toJS } from 'mobx';
import { withRouter, NavLink } from 'react-router-dom';
import {
  List,
  InputItem,
  TextareaItem,
  Button,
  Icon,
  Toast,
  Modal,
  Tools
} from 'weaver-mobile';
import './index.less';

const { getLabel } = Tools;
const { FormItem } = List;

@inject('remindPersonStore')
@withRouter
@observer
export default class RemindPerson extends React.Component {
  constructor(props) {
    super(props);

    this.store = props.remindPersonStore;
  }

  componentDidMount() {
    const { id } = this.props.match.params;

    this.store.init(id);
  }

  fillinRemind = () => {
    const { appid, title, content, remindPersonIds, fillinRemind, onCancel } = this.store;

    if (!title.trim()) {
      Toast.fail(getLabel(523504, '请填写消息提醒标题'), 2);
    } else if (!content.trim()) {
      Toast.fail(getLabel(523505, '请填写消息提醒描述'), 2);
    } else if (!toJS(remindPersonIds).length) {
      Toast.fail(getLabel(523506, '请选择消息提醒接收人'), 2);
    } else {
      Modal.alert('', getLabel(523507, '是否发送消息提醒'), [
        { text: getLabel(31129, '取消') },
        { text: getLabel(83446, '确定'), onPress: () => {
          fillinRemind({
            appid,
            title: title,
            content: content,
            type: 'MSGCENTER',
            receiver: remindPersonIds.join(',')
          }).then(() => {
            Toast.success(getLabel(523508, '发送提醒成功！'), 2);

            setTimeout(() => {
              onCancel();
              this.props.history.goBack();
            }, 2000);
          });
        }}
      ]);
    }
  }

  onCancel = () => {
    const { onCancel } = this.store;

    onCancel();
    this.props.history.goBack();
  }
    
  render () {
    const {
      title,
      content,
      onTitleChange,
      onContentChange,
      remindPerson,
      fillLoading
    } = this.store;

    const contentHtml = content.replace(/\n/g, "<br/>");

    return (
      <div className='wea-edc-remind-person'>
        <List>
          <FormItem
            label={getLabel(523509, '提醒方式') + '：'}
            wrap="nowrap"
            line  
            content={(
              <span>{getLabel(523510, '消息提醒')}</span>
            )}
          />
          <FormItem 
            label={getLabel(523511, '消息标题') + '：'}
            wrap='nowrap'
            line
            required
            content={(
              <InputItem
                clear 
                onChange={onTitleChange}
                value={title}
              />
            )}
          />
          <FormItem 
            label={getLabel(523512, '消息描述') + '：'}
            wrap='nowrap'
            line
            required
            content={(
              <TextareaItem
                rows={3} 
                autoHeight
                onChange={onContentChange}
                value={content}
              />
            )}
          />
          <FormItem 
            label={getLabel(523513, '接收人') + '：'}
            wrap='nowrap'
            line
            required
            content={(
              <span className='remind-person'>
                <span>
                  {remindPerson}
                </span>
                <NavLink to='/form/remind/list'>
                  <Icon type="search" size='xs'/>
                </NavLink>
              </span>
            )}
          />
          <FormItem 
            label={getLabel(523514, '消息样式预览') + '：'}
            wrap='wrap'
            content={(
              <div className='msg-per'>
                <div className='msg'>
                  <span className='mode'>{getLabel('502641', '数据中心')}</span>
                  <span className='title'>{title}</span>
                  <span className='desc' dangerouslySetInnerHTML={{ __html: contentHtml }}></span>
                  <span className='more'>
                    <b>{getLabel(523515, '阅读详情')}</b>
                    <i className="icon-coms-Right" />
                  </span>
                </div>
              </div>
            )}
          />
        </List>
        <div className='btns'>
          <Button size="small" inline onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>  
          <Button 
            type="primary" 
            size="small" 
            inline 
            onClick={this.fillinRemind}
            loading={fillLoading}
            >
            {getLabel('2083','发送') }
            </Button>
        </div>
      </div>
    )
  }
}